<template>
  <div>
    <div id="container" class="map-container">
    <!-- 显示高德地图 -->
    <!-- <el-amap ref="map" vid="amapDemo" :zoom="zoom" :center="center" style="height: 100vh; width: 100%"> -->
      <!-- 自定义标记 -->
      <!-- <el-amap-marker :events="markerEvents"  :position="center" :label="{ content: address.sname, offset: [-15, 35] }" @click="clickArrayMarker(center)"> -->
<!--        <button class="custom-button">{{ address.sname }}</button>-->
      <!-- </el-amap-marker>  -->
    <!-- </el-amap> -->
    </div>
    <div class="info">
    </div>
  </div>
</template>

<script>
  import VueAMap from 'vue-amap'
  import Vue from 'vue'
  import { Toast } from 'vant'

  export default {
    name: 'bflxnavigate',
    data () {
      return {
        address: this.$route.query.item,
        zoom: 11, // 地图缩放级别
        center: [116.397428, 39.90923], // 默认地图中心（北京市）
        location: null,
        markers: [],
        markerEvents: {
          // 点击事件
          click: (e) => {
            // 点击按钮跳转到高德地图APP
            // 标签内容
            // Toast('openAmapApp....')
            let lat = this.center[1]
            let lng = this.center[0]
            let amapUrl = `amapuri://route/plan/?dlat=${lat}&dlon=${lng}&dname=${encodeURIComponent(this.address.sname)}&dev=0&t=0`
            // Toast(amapUrl)
            window.location.href = amapUrl
          }
        }
      }
    },
    computed: {
      infoContent () {
        return this.content
      }
    },
    mounted () {
      this.initMap()
    },
    create () {
      let script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=e762e8d8003a79d26ece5f84b4afbfb0&plugin=AMap.Geocoder'
      document.body.appendChild(script)
      let script2 = document.createElement('script')
      script2.type = 'text/javascript'
      script2.src = 'https://webapi.amap.com/maps?v=1.4.15&key=e762e8d8003a79d26ece5f84b4afbfb0&plugin=AMap.Earth'
      document.body.appendChild(script2)
    },
    methods: {

      // 初始化地图，并根据地址定位
      initMap () {
        var map = new AMap.Map('container', {
          center: [117.000923, 36.675807],
          zoom: 11
        })
        //console.log('this.address', JSON.stringify(this.address))
        var geocoder = new AMap.Geocoder({
          city: '全国' // 城市设为北京，默认：“全国”
        })
        var address = this.address.saddress
        let that = this
        geocoder.getLocation(address, function (status, result) {
          //console.log('-------', status, result)
          if (status === 'complete' && result.geocodes.length) {
            var lnglat = result.geocodes[0].location
            that.center = [lnglat.lng, lnglat.lat]
            that.location = lnglat
            // document.getElementById('lnglat').value = lnglat;
            // marker.setPosition(lnglat);
            // map.add(marker);
            // map.setFitView(marker);
            var map = new AMap.Map('container', {
              resizeEnable: true,
              zoom: 16,
              center: that.center,
              viewMode: '3D'
            })

            var marker = new AMap.Marker({
              position: new AMap.LngLat(lnglat.lng, lnglat.lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
              title: address,
              offset: new AMap.Pixel(-17, -42)
            })

            map.add(marker)

            AMap.event.addListener(marker, 'click', function () {
              infoWindow.open(map, marker.getPosition())
            })

            let lat = that.center[1]
            let lng = that.center[0]
            let amapUrl = `amapuri://route/plan/?dlat=${lat}&dlon=${lng}&dname=${encodeURIComponent(that.address.sname)}&dev=0&t=0`
            // 实例化信息窗体
            var title = ''
                var content = []
            const text = `<div class="content" style=''><p>${address}</p><div><button class="navigation" style='' onclick= "window.location.href = '${amapUrl}'">导航</button></div></div>`
            content.push(text)
            var infoWindow = new AMap.InfoWindow({
                isCustom: true, // 使用自定义窗体
                content: createInfoWindow(title, content.join('<br/>')),
                offset: new AMap.Pixel(16, -45)
            })

            infoWindow.open(map, marker.getPosition())

            // 构建自定义信息窗体
            function createInfoWindow (title, content) {
                var info = document.createElement('div')
                info.className = 'custom-info input-card content-window-card'

                // 可以通过下面的方式修改自定义窗体的宽高
                // info.style.width = "400px";
                // 定义顶部标题
                var top = document.createElement('div')
                var titleD = document.createElement('div')
                var closeX = document.createElement('img')
                top.className = 'info-top'
                titleD.innerHTML = title
                closeX.src = 'https://webapi.amap.com/images/close2.gif'
                closeX.onclick = closeInfoWindow

                top.appendChild(titleD)
                top.appendChild(closeX)
                info.appendChild(top)

                // 定义中部内容
                var middle = document.createElement('div')
                middle.className = 'info-middle'
                // middle.style.backgroundColor = 'white';
                middle.innerHTML = content
                info.appendChild(middle)

                // 定义底部内容
                var bottom = document.createElement('div')
                bottom.className = 'info-bottom'
                bottom.style.position = 'relative'
                bottom.style.top = '0px'
                bottom.style.margin = '0 auto'
                var sharp = document.createElement('img')
                sharp.src = 'https://webapi.amap.com/images/sharp.png'
                bottom.appendChild(sharp)
                info.appendChild(bottom)
                return info
            }

            // 关闭信息窗体
            function closeInfoWindow () {
              map.clearInfoWindow()
            }
          } else {
            //console.log('根据地址查询位置失败')
          }
        })
      }
    },
    handleClick () {
      //console.log('handleClick')
      let lat = this.center[1]
      let lng = this.center[0]
      let amapUrl = `amapuri://route/plan/?dlat=${lat}&dlon=${lng}&dname=${encodeURIComponent(this.address.sname)}&dev=0&t=0`
      // Toast(amapUrl)
      window.location.href = amapUrl
    }
  }
</script>

<style>
  #container {
    width: 100vw;
    height: 100vh;
  }
  .map-container {
    width: 100%;
    height: 100%;
  }
  .custom-button {
    background-color: #409eff;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    width: 300px;
  }
  .content-window-card {
    padding: 3px;
    width: 80vw;
  }
  div.info-top {
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    background-color: rgba(54, 56, 57, 0.8);
  }
  div.info-top img {
    display: none;
  }
  div.info-middle {
    padding: 5px 13px;
    border-radius: 14px;
    background-color: rgba(54, 56, 57, 0.8);
  }
  div.info-bottom img{
    position: absolute;
    left: 150px;
  }
  .content {
    display: flex;justify-content: center;align-items: center;
  }
  .content p {
    flex: 6;
    margin: 0;
    padding: 0;
    color: #fff;
  }
  .content div {
    flex: 2;
  }
  .navigation {
    width: 70px;
    height: 30px;
    /* background-color: rgb(63, 143, 255); */
    background-color: #3385ff;
    border-radius: 10px;
    border: none;
    letter-spacing: 2px;
    color: #fff;
  }
</style>
